.chartOnline {
  height: 100vh;
  display: flex;
  width: 100%;
  flex-direction: column;
  box-sizing: border-box;
  .chartOnline-itemsInfo {
    position: relative;
    flex: 0 0 16%;
    max-height: 16%;
    &__imagePath {
      width: 160px;
      height: 160px;
      border-radius: 6px;
      margin-left: 30px;
    }
    &__info {
      margin-left: 20px;
      &-title {
        font-size: 32px;
        font-weight: 600;
      }
      &-tips {
        font-size: 26px;
        color: #999999;
        margin-top: 58px;
      }
    }
    &__btn {
      right: 19px;
      width: 150px;
      line-height: 60px;
      border: 1px solid #ff6b24;
      border-radius: 30px;
      text-align: center;
      font-size: 28px;
      color: #ff6b24;
      padding: 0 10px;
    }
  }

  .chartOnline-main {
    flex: 0 0 72%;
    max-height: 72%;
    .chartOnline-main-scroll {
      height: 100%;
      .container {
        padding-top: 30px;
        padding-bottom: 30px;
      }
    }
    &__info {
      margin-top: 30px;
      padding-right: 20px;
      padding-left: 20px;
    }
    &__info-txt {
      background-color: #a5d2fb;
      padding: 10px 20px;
      border-radius: 10px;
      margin-right: 30px;
      margin-left: 30px;
      position: relative;
      max-width: 350px;
      word-wrap: break-word;
      word-break: break-all;
      .txt-decorate {
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        position: absolute;
        top: 25px;
      }

      .txt-decorate-posleft {
        left: -20px;
        border-color: transparent #a5d2fb transparent transparent;
      }
      .txt-decorate-posright {
        border-color: transparent transparent transparent #a5d2fb;
        right: -20px;
      }
    }
    &__info-ava {
      width: 60px;
      height: 60px;
    }
    &__info-txtimg {
      max-width: 200px;
      max-height: 200px;
      margin-right: 30px;
      margin-left: 30px;
    }
  }
  .chartOnline-bottom {
    width: 100%;
    // flex: 0 0 12%;
    min-height: 12%;
    position: fixed;
    bottom: 0;
    left: 0;
    &__oper {
      padding: 10px;
    }
    &__oper-input {
      background-color: #f6f6f6;
      border-radius: 31px;
      padding: 5px 10px;
      width: 496px;
      min-height: 66px;
      margin-left: 17px;
    }
    &__oper-sendout {
      background-color: #c50001;
      padding: 15px 25px;
      color: #fff;
      margin: 0 15px;
    }
    &__ressource {
      border-top: 1px solid #d6e4ef;
      padding: 20px 30px;
      height: 300px;
    }
    &__ressource-type {
      width: 100px;
      flex-direction: column;
      align-items: center;
    }
  }
}
